<template>
	<view class="authenticationWrap">
	    <view class="centent">
	        <view class="top">
	            <view class="top_tit">上传身份证照片</view>
	            <view class="top_con">请上传本人真实有效的身份证原件</view>
	        </view>
	
	
	        <view class="img_wrap" @tap="onUpload" data-image="codecard1">
	          
	          <view class="img_border">
	            <!-- <image class="img_border_img" mode="scaleToFill" :src="$IMAGE_URL + '/idCard_border.png'" /> -->
				<!-- <image class="img_border_img" mode="scaleToFill" src="https://hexinzj.oss-cn-hangzhou.aliyuncs.com/upload/20230713/bd7ef72123074f2f9f74452c521e2660.jpg" /> -->
				
	          </view>
	
	          <view class="img_text">点击上传你的身份证头像面</view>
	
	          <view class="idCradImg_wrap">
	            <image class="idCradImg_img" mode="scaleToFill" :src="codecard1?codecard1: $IMAGE_URL + '/idCard_zheng.png'" />
	          </view>
	
	        </view>
	
	        <view class="img_wrap img_wrapT" @tap="onUpload" data-image="codecard2">
	          
	          <view class="img_border">
	            <image class="img_border_img" mode="scaleToFill" :src="$IMAGE_URL + '/idCard_border.png'" />
	          </view>
	
	          <view class="img_text">点击上传你的身份证国徽面</view>
	
	          <view class="idCradImg_wrap">
	            <image class="idCradImg_img" mode="scaleToFill" :src="codecard2?codecard2: $IMAGE_URL + '/idCard_fan.png'" />
	          </view>
	
	        </view>
	
	        <!-- <view class="idCradImg">
	            <view onTap="onUpload" data-image="codecard1">
	                <image mode="scaleToFill" style="width:550rpx;height:295rpx;" src="{{codecard1?codecard1:'../../../image/user/idcard1.png'}}"/>
	                <text>身份证人像面</text>
	            </view>
	            <view onTap="onUpload" data-image="codecard2">
	                <image mode="scaleToFill" style="width:550rpx;height:295rpx;" src="{{codecard2?codecard2:'../../../image/user/idcard2.png'}}"/>
	                <text>身份证国徽面</text>
	            </view>
	        </view> -->
	    </view>
	
	    <!-- <view class="footer">
	        disabled="{{ishow || !codecard1 || !codecard2}}"
	        <button class="footer-btn" size="default" type="primary"  onTap="onSubmit">提交</button>
	    </view> -->
	
	    <view :class="[systemSta == 1 ? 'bottom_zhan' : 'bottom_zhaniOS']"></view>
	
	    <view :class="[systemSta == 1 ? 'footer' : 'footeriOS']">
	      <view class="footer_top">
	        <image class="footer_top_icon" mode="scaleToFill" :src="$IMAGE_URL+'/anquan_icon.png'" />
	        <view class="footer_top_text">平台将智能加密，实施保障你的信息安全</view>
	      </view>
	      <!-- <button class="footer_btn footer_btnN" a:if="{{ishow || !codecard1 || !codecard2}}" size="default" type="primary" onTap="warningBtn">提交</button>
	      <button class="footer_btn" a:else size="default" type="primary" onTap="onSubmit">提交</button> -->
	      <button class="footer_btn" size="default" type="primary" @tap="onSubmit">提交</button>
	    </view>
		
	<!-- <uni-popup ref="popup" type="center" :animation="loadStatus">
		
	</uni-popup> -->
			<u-popup v-model="loadStatus" mode="center">
				<view class="com__box">
					<view class="loading">
						<view class="shape shape-1"></view>
						<view class="shape shape-2"></view>
						<view class="shape shape-3"></view>
						<view class="shape shape-4"></view>
					</view>
				</view>
			</u-popup>
		
	</view>
</template>

<script>
	import { mapMutations, mapActions, mapState, mapGetters } from "vuex";
	export default {
		components: {},
		data() {
			return {
				codecard1:'',
				codecard2:'',
				systemSta:0,
				loadStatus:false,
			};
		},
		computed: {
			...mapGetters(["userInfo", "authType"])
		},
		onLoad() {
			var idCards = JSON.parse(this.userInfo.idCardUrl);
			if(null != idCards){
				this.codecard1 = idCards[0]
				this.codecard2 = idCards[1]
			}
		},
		methods: {
			...mapActions(["getUserInfo"]),
			 // 提交
			    onSubmit() {
			        let  res = this.userInfo;
			        let arr = [this.codecard1, this.codecard2];
			        let data = {
			            idCardUrl: JSON.stringify(arr)
			        }
					if (this.codecard1 == '') {
						this.$u.toast("请上传身份证正面");
						return
					} 
					if (this.codecard2 == '') {
						this.$u.toast("请上传身份证反面");
						return
					} 
			        // return;
					this.$http(
						"user.saveIdCard",data,"保存中..."
					).then(res => {
						console.log(res)
						if (res.code === 200) {
							this.getUserInfo();
							this.$u.toast("保存成功");
							uni.$emit('IDCARD');
							uni.navigateBack()
						}else{
							this.$u.toast(res.msg);
						}
					});
					
			    },
				onUpload(e) {
					const name = e.currentTarget.dataset.image;
					uni.chooseImage({
						sourceType: ['camera', 'album'],
						count: 1,
						success: (res) => {
							console.log(1,res)
							const tempFiles = res.tempFiles[0];
							this.loadStatus = true
							uni.uploadFile({
								url: this.$API_URL + 'file/upload',
								file: tempFiles,
								filePath: tempFiles.path,
								name: 'file',
								success: res => {
									console.log("3==============",res)
									let rest = JSON.parse(res.data)
									console.log("3.1==============",rest)
									if (rest.code==200) {
										let str = rest.data
										const r = str.split('').reverse().join('');
										const p = r.search(/\./)
										str = r.substring(0, p).split('').reverse().join('');
										console.log(str)
										if (['jpg', 'jpeg', 'png', 'JPG','JPEG','PNG'].includes(str)) {
											this.$u.toast("上传成功");
											// this[`${'name'}`] = rest.data
											if(name == 'codecard1'){
												this.codecard1 = rest.data
											} else{
												this.codecard2 = rest.data
											}
										} else if (['UNKNOWN', 'unknown'].includes(str)) {
											this.$u.toast("图片格式错误，请重新上传");
										} else {
											this.$u.toast("图片无法识别，请重新上传");
										}
										console.log(['jpg', 'jpeg', 'png'].includes(str))
									} else {
										this.$u.toast("图片错误，请重新上传");
									}
									this.loadStatus = false
								},
								fail: err => {
									console.log(err)
									this.$u.toast("请重新上传");
									this.loadStatus = false
								}
							})
						},
						fail: (err) => {
						  if(err.error != 11){
							  this.$u.toast(err.errorMessage);
							  this.loadStatus = false
						  }
						}
					})
				},
		}
	};
</script>

<style>
	
	page {
	    background-color:#fff;
	}
	.authenticationWrap{
	  width: 100vw;
	  position: relative;
	}
	.centent {
	    width: 100%;
	    padding-top: 48rpx;
	}
	
	.top{
	  text-align: center;
	}
	.top_tit{
	  font-size: 48rpx;
	  font-weight: bold;
	  color: #333333;
	  line-height: 66rpx;
	}
	.top_con{
	  font-size: 30rpx;
	  font-weight: 400;
	  color: #767D8F;
	  line-height: 42rpx;
	  margin-top: 16rpx;
	}
	
	.img_wrap{
	  width: 654rpx;
	  height: 430rpx;
	  background: #F7F8F9;
	  border-radius: 4rpx;
	  margin: 48rpx auto 0;
	  position: relative;
	  box-sizing: border-box;
	  padding-top: 32rpx;
	}
	.img_wrapT{
	  margin: 24rpx auto 0;
	}
	.img_border{
	  width: 554rpx;
	  height: 324rpx;
	  margin: 0 auto;
	}
	.img_border_img{
	  width: 100%;
	  height: 100%;
	}
	.img_text{
	  text-align: center;
	  font-size: 28rpx;
	  color: #1677FF;
	  line-height: 40rpx;
	  letter-spacing: 1rpx;
	}
	.idCradImg_wrap{
	  width: 498rpx;
	  height: 280rpx;
	  border: 2rpx solid rgba(22, 119, 255, 0.4);
	  border-radius: 8rpx;
	  position: absolute;
	  left: 76rpx;
	  top: 52rpx;
	  overflow: hidden;
	}
	.idCradImg_img{
	  width: 100%;
	  height: 100%;
	}
	
	
	
	
	
	
	
	.idCradImg {
	    width: 100%;
	    padding:20rpx;
	    box-sizing: border-box;
	}
	.idCradImg view {
	    width: 550rpx;
	    height: 330rpx;
	    margin: 0 auto 30rpx;
	    text-align: center;
	    font-size: 26rpx;
	    color: #494949;
	}
	
	.bottom_zhan{
	  width: 100vw;
	  height: 230rpx;
	}
	.bottom_zhaniOS{
	  width: 100vw;
	  height: 260rpx;
	}
	.footer{
	  width: 100vw;
	  height: 190rpx;
	  background-color: #fff;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  z-index: 100;
	  box-sizing: border-box;
	  padding-top: 18rpx;
	}
	.footeriOS{
	  width: 100vw;
	  height: 220rpx;
	  background-color: #fff;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  z-index: 100;
	  box-sizing: border-box;
	  padding-top: 18rpx;
	}
	.footer_top{
	  width: 100%;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	.footer_top_icon{
	  width: 26rpx;
	  height: 30rpx;
	}
	.footer_top_text{
	  font-size: 24rpx;
	  color: #767D8F;
	  line-height: 34rpx;
	  margin-left: 8rpx;
	}
	.footer_btn{
	  width: 670rpx;
	  height: 88rpx;
	  padding: 0;
	  margin: 0;
	  background: linear-gradient(358deg, #1677FF 0%, #44B6FF 100%);
	  border-radius: 50rpx;
	  margin: 24rpx auto 0;
	  font-size: 32rpx;
	  font-weight: bold;
	  color: #FFFFFF;
	  line-height: 88rpx;
	  letter-spacing: 2rpx;
	  border: 0;
	  outline: 0;
	}
	.footer_btnN{
	  background: linear-gradient(352deg, #BBBBBB 0%, #CCCCCC 100%);
	}
	::v-deep.u-mode-center-box{
			background-color: transparent !important;
		}
	.com__box {
			position: absolute;
			top: 35%;
			left: calc((100% - 15px)/2);
		}
	 
		.loading {
			width: 30px;
			height: 30px;
			position: relative;
			animation: animationContainer 1s ease infinite;
		}
	 
		.shape {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			position: absolute;
		}
	 
		.shape-1 {
			background-color: #1875e5;
			left: 0;
			animation: animationShape1 0.5s ease infinite alternate;
		}
	 
		.shape-2 {
			background-color: #c5523f;
			right: 0;
			animation: animationShape2 0.5s ease infinite alternate;
		}
	 
		.shape-3 {
			background-color: #499255;
			bottom: 0;
			animation: animationShape3 0.5s ease infinite alternate;
		}
	 
		.shape-4 {
			background-color: #f2b736;
			right: 0;
			bottom: 0;
			animation: animationShape4 0.5s ease infinite alternate;
		}
	 
		@keyframes animationContainer {
			0% {
				transform: rotate(0);
			}
	 
			100% {
				transform: rotate(360deg);
			}
		}
	 
		@keyframes animationShape1 {
			0% {
				transform: translate(0, 0);
			}
	 
			100% {
				transform: translate(20px, 20px);
			}
		}
	 
		@keyframes animationShape2 {
			0% {
				transform: translate(0, 0);
			}
	 
			100% {
				transform: translate(-20px, 20px);
			}
		}
	 
		@keyframes animationShape3 {
			0% {
				transform: translate(0, 0);
			}
	 
			100% {
				transform: translate(20px, -20px);
			}
		}
	 
		@keyframes animationShape4 {
			0% {
				transform: translate(0, 0);
			}
	 
			100% {
				transform: translate(-20px, -20px);
			}
		}
	
</style>